<template>
	<div>
		<Row :gutter="20">
    	    <Col span="6" style="">
    	        <Card :style="inforCardStyle" :padding=6 :bordered="false" style="background: linear-gradient(to right, #146E95, #004F71); ">
    	        	<span style="color: #fff; margin-left: 6px;">
    	        	    <img src="@/assets/images/sale.png" style="margin-right: 9px; height: 16px;" />
    	        	    <span>销售概览</span>
    	        	</span>
					<Row>
						<Col span="12">
							<Row>
								<Col span="24" style="color: #fff; margin-top: 20px; text-align:center;">
								<Tooltip placement="bottom">
									<div slot="content">
									<p>今日：10</p>
									<p>本月：10</p>
									<p>总计：10</p>
									</div>
									<p style="font-size: 50px;">10</p>
									<p>订单数</p>
								</Tooltip>
								</Col>
							</Row>
						</Col>
						<Col span="12">
							<Row>
								<Col span="24" style="color: #fff; margin-top: 20px; text-align:center;">
								<Tooltip placement="bottom">
								<div slot="content">
									<p>今日：10</p>
									<p>本月：10</p>
									<p>总计：10</p>
									</div>
								<p style="font-size: 50px;">10</p>
								<p>销售额</p>
								</Tooltip>
								</Col>
							</Row>
						</Col>
					</Row>
    	        </Card>
    	    </Col>
			<Col span="9" style="padding-left:2.3%;">
    	        <Card :style="inforCardStyle" :padding=6 :bordered="false" style="background: linear-gradient(to right, #FA9D57, #E87722);">
    	        	<span style="color: #fff; margin-left: 6px;">
    	        	    <img src="@/assets/images/text.png" style="margin-right: 9px; height: 16px;" />
    	        	    <span>访问量(PV)</span>
    	        	</span>
					<Row>
						<Col span="8">
							<Row>
								<Col span="24" style="color: #fff; margin-top: 20px; text-align:center;">
									<p style="font-size: 50px;">10</p>
									<p>今日访问量</p>
                        		</Col>
							</Row>
						</Col>
						<Col span="8">
							<Row>
								<Col span="24" style="color: #fff; margin-top: 20px; text-align:center;">
									<p style="font-size: 50px;">10</p>
									<p>本月访问量</p>
								</Col>
							</Row>
						</Col>
						<Col span="8">
							<Row>
								<Col span="24" style="color: #fff; margin-top: 20px; text-align:center;">
									<p style="font-size: 50px;">10</p>
									<p>总计访问量</p>
								</Col>
							</Row>
						</Col>
					</Row>
    	        </Card>
    	    </Col>
			<Col span="9" style="padding-left:2.3%;">
				<Card :style="inforCardStyle" :padding=6 :bordered="false" style=" background: linear-gradient(to right, #EED276 , #DABD61); ">
					<span style="color: #fff; margin-left: 6px;">
                    	<img src="@/assets/images/member.png" style="margin-right: 9px; height: 16px;" />会员数量
					</span>
					<Row>
						<Col span="8">
							<Row>
								<Col span="24" style="color: #fff; margin-top: 20px; text-align:center;">
									<p style="font-size: 50px;">10</p>
									<p>会员总数</p>
                        		</Col>
							</Row>
						</Col>
						<Col span="8">
							<Row>
								<Col span="24" style="color: #fff; margin-top: 20px; text-align:center;">
									<p style="font-size: 50px;">10</p>
									<p>今日新增会员</p>
								</Col>
							</Row>
						</Col>
						<Col span="8">
							<Row>
								<Col span="24" style="color: #fff; margin-top: 20px; text-align:center;">
									<p style="font-size: 50px;">10</p>
									<p>本月新增会员</p>
								</Col>
							</Row>
						</Col>
					</Row>
				</Card>
			</Col>
    	</Row>
		<Row>
			<Col span="24" style="">
				<Card id="dashboard-diagram" :bordered="false"  style="margin-top: 25px; ">
					<Menu slot="title" mode="horizontal" active-name="1">
						<MenuItem name="1">
							<Icon type="ios-people" /> 会员活跃度
						</MenuItem>
						<!-- <MenuItem name="2">
						<Icon type="ios-trending-up" /> 销售额
						</MenuItem>
						<MenuItem name="4">
						<Icon type="ios-chatbubbles-outline" /> 互动数
						</MenuItem> -->
					</Menu>
					<trend style="height: 265px;"/>
				</Card>
            </Col>
		</Row>
  </div>
</template>

<script>
import InforCard from '_c/info-card'
import CountTo from '_c/count-to'
import { ChartPie, ChartBar } from '_c/charts'
import Trend from './trend.vue'
export default {
  name: 'home',
  components: {
    InforCard,
    CountTo,
    ChartPie,
    ChartBar,
    Trend
  },
  data () {
    return {
      inforCardStyle: {
        height: '176px'
      },
      inforCardData: [
        { title: '新增用户', icon: 'md-person-add', count: 803, color: '#2d8cf0' },
        { title: '累计点击', icon: 'md-locate', count: 232, color: '#19be6b' },
        { title: '新增问答', icon: 'md-help-circle', count: 142, color: '#ff9900' },
        { title: '分享统计', icon: 'md-share', count: 657, color: '#ed3f14' },
        { title: '新增互动', icon: 'md-chatbubbles', count: 12, color: '#E46CBB' },
        { title: '新增页面', icon: 'md-map', count: 14, color: '#9A66E4' }
      ],
      pieData: [
        { value: 335, name: '直接访问' },
        { value: 310, name: '邮件营销' },
        { value: 234, name: '联盟广告' },
        { value: 135, name: '视频广告' },
        { value: 1548, name: '搜索引擎' }
      ],
      barData: {
        Mon: 13253,
        Tue: 34235,
        Wed: 26321,
        Thu: 12340,
        Fri: 24643,
        Sat: 1322,
        Sun: 1324
      }
    }
  },
  mounted () {
    //
  }
}
</script>

<style lang="less">
.count-style{
  font-size: 50px;
}
#dashboard-diagram .ivu-card-head{
  padding: 0px;
}
</style>
